<script setup lang="ts">
import { onMounted, ref } from "vue";
//引入学生相关的小仓库
import useStudentStore from '@/store/modules/student';


let studentStore = useStudentStore();
let studentNotice = ref('');
let groupNotice = ref('');
onMounted(() => {
  //请求信息展示
  studentNotice.value = studentStore.userInfo.studentNotice;
  groupNotice.value = studentStore.userInfo.groupNotice;
})
</script>

<template>
  <el-row :gutter="20"> <!-- gutter 属性用于设置栅格间隔 -->
    <el-col :span="12"> <!-- 使用 span 设置列宽，这里为12表示占据一半宽度 -->
      <el-card class="box-card">
        <template #header>
          <div style="text-align: center">
            <h1>组长通知</h1>
          </div>
        </template>
        <div>
          {{ studentNotice }}
        </div>
      </el-card>
    </el-col>
    <el-col :span="12"> <!-- 同样占据另一半宽度 -->
      <el-card class="box-card">
        <template #header>
          <div style="text-align: center">
            <h1>老师通知</h1>
          </div>
        </template>
        <div>
          {{ groupNotice }} <!-- 注意：这里应该是不同的变量名，以区分不同内容 -->
        </div>
      </el-card>
    </el-col>
  </el-row>
</template>

<style scoped lang="scss">
.el-card {
  width: 100%;
  /* 让卡片自适应父容器宽度 */
  height: 500%
    /* 根据内容自动调整高度 */
}

/* 如果需要进一步定制卡片样式，可以添加更多样式规则 */
.box-card {
  margin-bottom: 20px;
  /* 卡片之间的间距 */
}
</style>